<template>
  <div class="init">
    <div class="HelpMore">
      <p class="title">
        帮助中心> 搜索"{{$route.query.searchMsg}}"
        <el-input
          placeholder="请输入内容"
          style="width: 300px;float: right;"
          v-model="input3"
          class="input-with-select"
        >
          <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
        </el-input>
      </p>
      <p class="NoTime" v-if="leftMsg.length == 0">暂无“{{$route.query.searchMsg}}”的帮助内容</p>
      <ul v-if="leftMsg.length !== 0">
        <router-link
          v-for="(item,i) in leftMsg"
          :key="i"
          tag="li"
          :to="'/getContent?catId='+ item.helpCatId+'&id='+ item.id"
        >
          <p>
            <span></span>
            {{item.title}}
          </p>
        </router-link>
      </ul>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
// import { searchHelpContent } from "../api/api";
import qs from "qs";
export default {
  data() {
    return {
      input3: "",
      titleList: [],
      mainList: [],
      leftMsg: [],
      page: 1,
      total: 1,
      pageSize: 8
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let data = qs.stringify({
        searchWords: this.$route.query.searchMsg,
        pageNum: this.page,
        pageSize: this.pageSize
      });
      searchHelpContent(data).then(res => {
        this.leftMsg = res.data.data;
        this.total = res.data.count;
        console.log(res)
      });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.page = val;
      this.init();
    },
    search(){
      
    }
  }
};
</script>

<style lang="scss" scoped>
.init {
  width: 100%;
  background: #fff;
  .HelpMore {
    width: 1200px;
    margin: 80px auto;
    padding: 50px;
    .title {
      line-height: 40px;
      background: #f2f2f2;
      padding: 10px;
    }
    .NoTime {
      text-align: center;
      line-height: 100px;
    }
    ul {
      padding: 60px 50px;
      li {
        height: 50px;
        display: flex !important;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        p {
          line-height: 50px;
          padding-right: 10px;
          color: #8c979d;
          span {
            display: inline-block;
            padding: 8px;
            background: #8c979d;
            margin-bottom: -3px;
            margin-right: 10px;
            border-radius: 50%;
          }
        }
      }
      li:hover {
        p {
          color: #6881ff;
          span {
            background: #6881ff;
          }
        }
      }
    }
  }
}
</style>